var absPath = '';
// var absPath = 'file:///Users/Leo/ITK%20Project/Big%20C%20Idol%20App/BigC_App/';
var resArr = []; //load with loader
var numImagesLoaded = 0;
var totalResCount = 0;
var currentQueue, subQueue;
var currentPriority = 0; //First load should always has order = 1
var lazyObj;
var idxCount = 0, queueCount = 0;
var do2ndResLoad = false;
var loadbar = 0;

function init()
{
	
	currentQueue = null;
	
	if(!do2ndResLoad)
	{
		currentQueue = $('img.first');		
	}
	else
	{
		currentQueue = $('img.lazy');
	}
	totalResCount = currentQueue.length  ;
	
	if(!currentQueue || currentQueue.length == 0)
  		return;

  	currentQueue.sort( function( a, b ) {
		if(!$(a).attr('order'))
			$(a).attr('order',9999);
		if(!$(b).attr('order'))
			$(b).attr('order',9999);
		return $(a).attr('order') - $(b).attr('order');
		
  	});

  	

	idxCount = 0;	

	currentQueue.each(function(idx, elem)
	{
		
		resArr.push(absPath + $(elem).attr('lazy-src'));	
		queueCount++;
	});	
	totalResCount = resArr.length;
}

function Start()
{
	Restart();
}

//Each priority -> Call Load then increase currentPriority
function Restart()
{
	var tempObj ;	
	var subArr = [];
	currentPriority = $(currentQueue.get(idxCount)).attr('order'); //Start with 1st priority number
	while(true)
	{	
		subArr.push($(currentQueue.get(idxCount)));
		idxCount++;
		if(idxCount == totalResCount)
			break;
		if(currentPriority != $(currentQueue.get(idxCount)).attr('order'))
			break;
	}
	load(subArr);
	
}

var currentQueueControlCount = 0;
var currentQueueControlTotal = 0;
function load(elems)
{
	
	currentQueueControlCount = 0;
	currentQueueControlTotal = elems.length;
	$(elems).each(function(idx, elem)
		{
			$(elem).attr('src', absPath + $(elem).attr('lazy-src'));

			$(elem)	.load(incrementAndCheckLoading)
					.error(incrementAndCheckLoadingErr);
		});
	
	
}

function incrementAndCheckLoading(elem){
	currentQueueControlCount++;
    if(!do2ndResLoad)
    {
	    numImagesLoaded++;
	    //Incre: loadBar.width = numImagesLoaded * 100 / totalResCount;
		
		loadBar = numImagesLoaded * 100 / totalResCount;
		console.log(loadBar);
		$('#line').animate({"width":loadBar+ '%'},1
				/*,function(){
							$('#line').animate({"width": 100 + '%'},100,function(){})
										
		}*/

		)
		
		
	    if(numImagesLoaded == totalResCount){
	        do2ndResLoad = true;
	       
			$('#line').animate({"height":'100%','top':'0'},1000,function(){
										
										// $('.bg_loading').each(function(i, element){
										// 		$(element).css('background-image','url('+ absPath + $(element).attr('lazy-src') + ')');
										// });
											
										$('.bg_img').remove();
										$('#top_loading').hide();
										$('#bottom_loading').hide();
										$('#line').fadeOut(1000,function(){
																	$('#line').remove();
																	$('#top_loading').remove();
																	$('#bottom_loading').remove();
																	
																});
										//WEB ANIMATION 
										$('#micro_midlight').css('opacity','0');
										$('#micro_leftlight').css('top','-550px');
										$('#micro_rightlight').css('top','-550px');
										$('#microlight1').css('transform','scale(0.0)');
										$('#microlight2').css('transform','scale(0.0)');
										$('#microlight3').css('transform','scale(0.0)');
										$('#microlight4').css('transform','scale(0.0)');
										$('#microlight5').css('transform','scale(0.0)');
										$('#microlight6').css('transform','scale(0.0)');
										$('#microlight7').css('transform','scale(0.0)');
										$('#microlight8').css('transform','scale(0.0)');
										$('#microlight9').css('transform','scale(0.0)');

										$('#microlight1').css('opacity','0');
										$('#microlight2').css('opacity','0');
										$('#microlight3').css('opacity','0');
										$('#microlight4').css('opacity','0');
										$('#microlight5').css('opacity','0');
										$('#microlight6').css('opacity','0');
										$('#microlight7').css('opacity','0');
										$('#microlight8').css('opacity','0');
										$('#microlight9').css('opacity','0');

										$('#like').delay(500).css('opacity','0');
										$('#like').delay(1500).animate({ 'opacity': '1'},1500,'easeOutBack');
										$('#home_micro').css('transform','scale(0.0)');
							        	$('#home_micro').delay(500).animate({ transform: 'scale(1,1)'},500,'easeOutBack',function(){

								        	$('#micro_leftlight').delay(500).animate({ 'top': '-150px'},500,'easeOutQuad');
								        	
								        	$('#micro_rightlight').delay(500).animate({ 'top': '-150px'},500,'easeOutQuad',function(){

										        	$('#micro_midlight').delay(300).animate({'opacity':'0.6'},100,'easeOutQuad');
										        	$('#micro_midlight').animate({'opacity':'0'},100,'easeOutQuad');
										        	$('#micro_midlight').animate({'opacity':'0.6'},100,'easeOutQuad');
										        	$('#micro_midlight').delay(400).animate({'opacity':'0'},100,'easeOutQuad');
										        	$('#micro_midlight').delay(600).animate({'opacity':'0.7'},100,'easeOutQuad');

										        	//Start Anim 
										        	ngoisao1();ngoisao2();ngoisao3();ngoisao4();
										        	ngoisao5();ngoisao6();ngoisao7();ngoisao8();ngoisao9();
										        	// $('#microlight2').delay(600).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
										        	// $('#microlight3').delay(200).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
										        	// $('#microlight4').delay(800).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
										        	// $('#microlight5').delay(400).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
										        	// $('#microlight6').delay(100).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
										        	// $('#microlight7').delay(1000).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
										        	// $('#microlight8').delay(1500).animate({ transform: 'scale(1,1)'},500,'easeOutBack');
								        		});
							        		});		
									});
			init();
	    }    
	}
    //continue loading
    if(currentQueueControlCount == currentQueueControlTotal)
    	Restart();
}    


//ANIMATION 
function ngoisao1(){
	$('#microlight1').animate({ transform: 'scale(1,1)','opacity':'1'},500,'swing',function ngoisao1back(){
		$('#microlight1').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao1());
	});		
}

function ngoisao2(){
	$('#microlight2').delay(500).animate({ transform: 'scale(1,1)','opacity':'1'},500,'swing',function ngoisao2back(){
		$('#microlight2').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao2());
	});		
}

function ngoisao3(){
	$('#microlight3').delay(700).animate({ transform: 'scale(1,1)','opacity':'1'},600,'swing',function ngoisao3back(){
		$('#microlight3').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao3());
	});		
}

function ngoisao4(){
	$('#microlight4').delay(200).animate({ transform: 'scale(1,1)','opacity':'1'},500,'swing',function ngoisao4back(){
		$('#microlight4').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao4());
	});		
}

function ngoisao5(){
	$('#microlight5').delay(100).animate({ transform: 'scale(1,1)','opacity':'1'},300,'swing',function ngoisao5back(){
		$('#microlight5').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao5());
	});		
}

function ngoisao6(){
	$('#microlight6').delay(500).animate({ transform: 'scale(1,1)'},400,'swing',function ngoisao6back(){
		$('#microlight6').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao6());
	});		
}

function ngoisao7(){
	$('#microlight7').delay(900).animate({ transform: 'scale(1,1)','opacity':'1'},300,'swing',function ngoisao7back(){
		$('#microlight7').animate({ transform: 'scale(0,0)','opacity':'0'},1000,'swing',ngoisao7());
	});		
}

function ngoisao8(){
	$('#microlight8').delay(1000).animate({ transform: 'scale(1,1)','opacity':'1'},400,'swing',function ngoisao8back(){
		$('#microlight8').animate({ transform: 'scale(0,0)','opacity':'0'},400,'swing',ngoisao8());
	});		
}

function ngoisao9(){
	$('#microlight9').delay(400).animate({ transform: 'scale(1,1)','opacity':'1'},300,'swing',function ngoisao9back(){
		$('#microlight9').animate({ transform: 'scale(0,0)','opacity':'0'},700,'swing',ngoisao9());
	});		
}
//=============================================
function incrementAndCheckLoadingErr(elem){

	
	currentQueueControlCount++;
    if(!do2ndResLoad)
    {
	    numImagesLoaded++;
	    //Incre: loadBar.width = numImagesLoaded * 100 / totalResCount;
		
		loadBar = numImagesLoaded * 100 / totalResCount;
		
		$('#line')
				.animate({"width":loadBar+ '%'},1
				/*,function(){
							$('#line').animate({"width": 100 + '%'},100,function(){})
									
		}*/
		)
		
		
	    if(numImagesLoaded == totalResCount){
	        do2ndResLoad = true;
	       
			
			$('#line').animate({"height":'100%','top':'0'},1000,function(){
										$('#top_loading').hide();
										$('#bottom_loading').hide();
										$('#line').fadeOut(1000,function(){
																	$('#line').remove();
																	$('#top_loading').remove();
																	$('#bottom_loading').remove();
																	
																});
									})
			
			
			
			init();
	    }    
	}
    //continue loading
    if(currentQueueControlCount == currentQueueControlTotal)
    	Restart();
}    